<template>
	<x-border v-if="widgetModel" icon="flaticon-settings" ref="xBorder" :border="widgetModel.border">
		<zk-auto-form :serviceConfig="widgetModel" ref="zkAutoForm" @saveForm="saveForm"></zk-auto-form>
	</x-border>
</template>

<script>
	import './var.scss'
	import './styles'

	import ala from 'ala'
	export default {
		data() {
			return {
				widgetModel: null,
				firstLoad: true // 首次加载
			}
		},
		props: {
			widget: {}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				let par = {
					id: this.$ala.getId(),
					type: this.$ala.urlType()
				}
				var response = await this.$ala.httpGet('api/Auto/Form', par)
				if (response) {
					this.widgetModel = response
					this.$ala.setTitle(this.widgetModel.name)
				}
				this.firstLoad = false
			},
			async saveForm(models) {
				let parameter = {
					type: this.$ala.urlType(),
					userId: this.$ala.urlId(),
					model: JSON.stringify(models)
				}
				var response = await this.$ala.httpPost('api/auto/save', parameter)
				if (response) {
					this.$ala.toMessage(response)
				}
				if (this.$refs.zkAutoForm) {
					this.$refs.zkAutoForm.setSaveStatus(false)
				}
			},
			async wathcRoute() {
				if (this.firstLoad === true) {
					return // 第一次加载，不监听路由，防止二次触发
				}
				if (this.$ala.router().path !== '/Admin/LightApp/Edit') {
					return // 调转到其他页面时，不执行
				}
				this.widgetModel = null
				await this.init()
			}
		},
		watch: {
			$route: 'wathcRoute'
		}
	}
</script>